<template>
  <div class="refund_details">
      <div class="list" v-for="(item,index) in state==0?list:state==1?th_list:''" :key="index">
          <div class="header">
            <div class="header_info">
                <div class="refund">{{item.title}}</div>
                <div class="refund_time">还剩{{item.time}}</div>
            </div>
          </div>
          <!-- 退款/退款详情，商家未同意 -->
          <!-- <div class="content">
              <div class="content_header">{{item.content_header}}</div>
              <div class="content_infot">
                · {{item.info_t}}
              </div>
              <div class="content_infoc">
                · {{item.info_c}}
              </div>
              <div class="content_infob">
                · {{item.info_b}}
              </div>
          </div> -->
          <!-- 退货详情，商家同意 -->
          <div class="th_content">
            <div class="content_header">卖家已同意退货申请，请尽早退货</div>
              <div class="th_header">
                  <div class="name">收货人：陈小鱼</div>
                  <div class="tel">13475421364</div>
              </div>
              <div class="address">浙江省杭州市萧山区宁围镇民和路188号浙江民营企业大厦B座20楼2005室</div>
              <div class="total">温馨提示：不接受任何形式的到件付哦</div>
          </div>
          <!-- 退款/退款详情，商家未同意按钮 -->
          <!-- <div class="change" v-if="state==0?true:false">
              <div class="change_box" v-for="(key,id) in change_list" :key="id" @click="change(id)" >{{key.title}}</div>
          </div>
          <div class="th_change" v-if="state==1?true:false">
              <div class="change_box" :style="id==1?'border:1px solid rgba(255,61,79,1);color:#FF3D4F':''" v-for="(key,id) in th_change_list" :key="id" @click="change(id)" >{{key.title}}</div>
          </div>  -->
           <!-- 商家同意退货按钮  -->
           <div class="th_change" v-if="th_state?true:false">
              <div class="change_box" :style="id==1?'border:1px solid rgba(255,61,79,1);color:#FF3D4F':''" v-for="(key,id) in th_success_list" :key="id" @click="th_change(id)" >{{key.title}}</div>
          </div> 
      </div>
      
  </div>
</template>

<script>

export default {

  data () {
    return {
        state:'0', //状态
        th_state:true, //商家同意退货状态
        success_list:[{title:'商家已同意退款',time:'4天23小时59分',content_header:'商家已同意您的退款申请。',info_t:'商家已同意退款，退款金额将会在3-5个工作日内到达您的账户'}],  //商家同意退款
        list:[{title:'等待商家处理',time:'4天23小时59分',content_header:'您已成功发起退款申请，请耐心等待商家处理。',info_t:'商家同意后，退款金额会原路退回。'   
        ,info_c:'如商家拒绝，您可以再次发起，商家会重新处理。',info_b:'如商家超时未处理，退款申请将达成，系统会将退款金额原路退 回到您的账户中。'}],//申请退款详情
        th_list:[{title:'等待商家处理',time:'4天23小时59分',content_header:'您已成功发起退货申请，请耐心等待商家处理。',info_t:'商家同意后，退款金额会原路退回。'   
        ,info_c:'如商家拒绝，您可以再次发起，商家会重新处理。',info_b:'如商家超时未处理，退款申请将达成，系统会将退款金额原路退 回到您的账户中。'}], //申请退货详情
        success_list:[{title:'请退货并填写物流单',time:'4天23小时59分',content_header:'卖家已同意退货申请，请尽早退货',info_t:'商家已同意退款，退款金额将会在3-5个工作日内到达您的账户'}],  //商家同意退货
        change_list:[{title:'撤销申请'}], //申请退款按钮
        th_change_list:[{title:'修改申请'},{title:'撤销申请'}],  //申请退货按钮
        th_success_list:[{title:'我已寄出'}], //申请退款按钮
    }
  },
  methods: {
      change(id){
        // console.log()
        if(this.state==0){
          wx.showModal({
            confirmColor:'#FF3D4F',
            cancelColor:'#333333',
            content: '您将撤销本次申请，如果问题未解决，您还可以再次发起。您确定继续吗？',
            success (res) {
              if (res.confirm) {
                wx.navigateTo({
                  url: '/pages/afterSale/main'
                })
              } else if (res.cancel) {
                wx.redirectTo({
                  url: '/pages/order/main'
                })
              }
            }
          })
        }else if(this.state==1){
          if(id==0){
             this.globalData.refundId = this.state
             wx.redirectTo({
              url: '/pages/only_refund/main'
            })
          }else{
            wx.showModal({
              confirmColor:'#FF3D4F',
              cancelColor:'#333333',
              content: '您将撤销本次申请，如果问题未解决，您还可以再次发起。您确定继续吗？',
              success (res) {
                if (res.confirm) {
                  wx.navigateTo({
                    url: '/pages/afterSale/main'
                  })
                } else if (res.cancel) {
                  wx.redirectTo({
                    url: '/pages/afterSale/main'
                  })
                }
              }
            })
          }
        }
        
      },
      th_change(){
        wx.navigateTo({
          url: '/pages/logistics_info/main'
        })
      }
  },
  created () {
    // let app = getApp()
  },
  onLoad(options){
      console.log(options)
      if(options.refund=='退款中'){
        wx.setNavigationBarTitle({
          title: '退款详情'
        })
        this.state=0
      }
      if(options.refund=='退货中'){
        wx.setNavigationBarTitle({
          title: '退货详情'
        })
        this.state=1
      }
      // this.state = options.id
  },
  onShow(){
   
  },
  mounted() {

  } 
}
</script>

<style scoped lang="less">
  .refund_details{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #f5f5f5;
    .list{
      width: 100%;
      // height: 350rpx;
      background: #fff;
      .header{
        width: 100%;
        height: 180rpx;
        background:rgba(255,61,79,1);
        display: flex;
        align-items: center;
        padding-left: 69rpx;
        box-sizing: border-box;
        color: #fff;
        font-size: 32rpx;
        font-weight:bold;
        .refund_time{
          font-size: 24rpx;
          margin-top: 20rpx;
        }
      }
      .content{
        width: 100%;
        height: 350rpx;
        background: #fff;
        .content_header{
          padding: 14rpx 45rpx 15rpx 75rpx;
          box-sizing: border-box;
          color: #333;
          font-size: 26rpx;
        }
        .content_infot{
           padding: 14rpx 45rpx 0rpx 68rpx;
          box-sizing: border-box;
          color: #999;
          font-size: 22rpx;
        }
         .content_infoc{
           padding: 14rpx 45rpx 0rpx 68rpx;
          box-sizing: border-box;
          color: #999;
          font-size: 22rpx;
        }
         .content_infob{
           padding: 14rpx 45rpx 0rpx 68rpx;
          box-sizing: border-box;
          color: #999;
          font-size: 22rpx;
        }
      }
      .th_content{
         width: 100%;
        height: 350rpx;
        background: #fff;
        color: #999;
        font-size: 22rpx;
        .content_header{
          padding: 14rpx 45rpx 15rpx 75rpx;
          box-sizing: border-box;
          color: #333;
          font-size: 26rpx;
        }
        .th_header{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15rpx 45rpx 21rpx 75rpx;
          box-sizing: border-box;
        }
        .address{
          width: 100%;
          padding: 0px 45rpx 0rpx 75rpx;
          box-sizing: border-box;
        }
        .total{
          width: 100%;
          padding: 13rpx 45rpx 15rpx 75rpx;
          box-sizing: border-box;
          color: #FF3D4F;
        }
      }
      .change{
        padding: 66rpx 35rpx 50rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        .change_box{
          width:160rpx;
          height:60rpx;
          border:1rpx solid rgba(255,61,79,1);
          border-radius:30rpx;
          font-size:26px;
          font-weight:500;
          color:rgba(255,61,79,1);
          line-height: 60rpx;
          text-align: center;
        }
      }
      .th_change{
        padding: 66rpx 35rpx 50rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        .change_box{
          width:160rpx;
          height:60rpx;
          border:1px solid rgba(51,51,51,1);
          border-radius:30rpx;
          font-size:26px;
          font-weight:500;
          color:#333;
          line-height: 60rpx;
          text-align: center;
          margin-left: 20rpx;
        }
      }
    }
  }
 
</style>
